//引入基础
@import "basic.less";
@import "animate.min.less";
html,body{width:100%; margin:0 auto; height:100%; overflow:hidden;}

//设计稿750px分成100份，1a=7.5px, 1rem=75px;
@baseU:75rem;

img{max-width:100%;}
button{
	border:0;
	background-color:transparent;
	&.img-btn{
		font-size:0;
		line-height:0;
	}
}
body{
	background-color:#000;
}
html,body{
	width:100%;
	height:100%;
}
.imgBox{
	font-size:0;
	line-height:0;
}
.text-orange{color:#ecb042; font-weight:normal;}
.block-btn{
	display:block;
	padding:0.5em 0;
	width:100%;
	.font(normal,14px,1.5,'Microsoft YaHei');
	background-color:transparent;
	border:2px solid #b8b7bc;
	color:#b8b7bc;
	border-radius:0.3em;
	margin-bottom:0.8em;
}

//加载页面
#loading{
	width:100%;
	height:100%;
	background:url(../img/loading_bg.jpg) center center no-repeat;
	background-size:cover;
	position:fixed;
	top:0;
	left:0;
	z-index:200;
	.center_v;
	.loading-inner{
		width:250/@baseU;
		padding-bottom:20/@baseU;
		text-align:center;
	}
	.loaing-progress{
		width:100%;
		height:16/@baseU;
		border-radius:8px;
  		background-color:#706153;
		-moz-box-shadow:5px 5px 5px #4d4038 inset;               /* For Firefox3.6+ */
		-webkit-box-shadow:5px 5px 5px #4d4038 inset;            /* For Chrome5+, Safari5+ */
		box-shadow:5px 5px 5px #4d4038 inset;					/* For Latest Opera */
		.border-box;
		padding-left:1px;
		padding-right:1px;
		padding-top:1px;
		padding-bottom:1px;
		overflow:hidden;
		margin-bottom: 20/@baseU;
		.percent{
			width:0%;
			height:100%;
			background-color: #dba33d;
			border-radius:8px;
		}
	}
	.progress{
		font-size:14px;
		color:#352a20;
	}
}
#main{
	width:100%;
	height:100%;
	display:none;
}
//动画的定义
.swiper-tip-ani-beat{
  from {
	bottom:30/@baseU;
  }
  to {
	bottom:40/@baseU;
  }
}
@keyframes swiper-tip-ani-beat{ .swiper-tip-ani-beat}
@-moz-keyframes swiper-tip-ani-beat{ .swiper-tip-ani-beat}
@-webkit-keyframes swiper-tip-ani-beat{ .swiper-tip-ani-beat}
@-o-keyframes swiper-tip-ani-beat{ .swiper-tip-ani-beat}

.swiper-tip{
	width:67/@baseU;
	height:39/@baseU;
	position:absolute;
	left:50%;
	bottom:30/@baseU;
	margin-left:-67/2/@baseU;
	.animation(swiper-tip-ani-beat,1.6s,linear,infinite,normal,forwards);
}
.swiper-slide2{
	position:relative;
	width:100%;
	height:100%;
	background: url(./../img/bg3.jpg) 0 0 no-repeat;
	background-size:100% 100%;
	.swiper-slide-inner{
		// position:absolute;
		width:100%;
		padding-top:40%;
	}
	.top{
		position:absolute;
		width:100%;
		top:80/@baseU;
		left:0;
		text-align:center;
		color:#fff;
		.font(normal,14px,2.4,'Microsoft YaHei');
		background: url(./../img/titlebg.png) 0 0 no-repeat;
		background-size:100% 100%;
	}
	.bottom{
		position:absolute;
		width:100%;
		bottom:200/@baseU;
		color:#fff;
		left:0;
		.name{
			width:100%;
			background: url(./../img/namebg.png) 0 0 no-repeat;
			background-size:100% 299/@baseU;
			padding-top:268/@baseU;
			font-size:16px;
			margin-bottom:0.5em;
		}
		.font(normal,14px,1.5,'Microsoft YaHei');
	}
	.stageBox{
		position:absolute;
		width:100%;
		left:0;
		bottom:500/@baseU;
		z-index:10;
	}
}
#stage{
	width:200/@baseU;
	height:300/@baseU;
	position:relative;
	margin:0 auto;
	background:null;
	-webkit-transform:rotateX(-20deg) rotateY(0deg) perspective(2000/@baseU);
	-moz-transform:rotateX(-20deg) rotateY(0deg) perspective(2000/@baseU);
	-ms-transform:rotateX(-20deg) rotateY(0deg) perspective(2000/@baseU);
	-o-transform:rotateX(-20deg) rotateY(0deg) perspective(2000/@baseU);
	transform:rotateX(-20deg) rotateY(0deg) perspective(2000/@baseU);
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-ms-transform-style:preserve-3d;
	-o-transform-style:preserve-3d;
	transform-style:preserve-3d;
	.transition(all,0.5s,ease,0s);
}
#shadow{
	position:absolute;
	left:50%;
	top:50%;
	width:1200px;
	height:1200px;
	margin-left:-600px;
	margin-top:-600px;
	background:-webkit-radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));
	background:-moz-radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));
	background:-ms-radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));
	background:-o-radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));
	background:radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));
	-webkit-transform:translateY(200px) rotateX(90deg);
	-moz-transform:translateY(200px) rotateX(90deg);
	-ms-transform:translateY(200px) rotateX(90deg);
	-o-transform:translateY(200px) rotateX(90deg);
	transform:translateY(200px) rotateX(90deg);
}
#stage dd{
	width:200/@baseU;
	height:300/@baseU;
	position:absolute;
	left:0;
	top:0;
	border:1px solid #666;
	background-size:100% 100%;
	-webkit-transition:500ms all ease;
	-moz-transition:500ms all ease;
	-ms-transition:500ms all ease;
	-o-transition:500ms all ease;
	transition:500ms all ease;
	.item{
		width:100%;
		height:100%;
		.center_v;
		position:relative;
	}
	.seccessTip{
		width:64/@baseU;
		height:64/@baseU;
		display:none;
	}
	&.seclected{
		.seccessTip{
			display:block;
		}
	}
	.died{
		display:none;
		position:absolute;
		width:112/@baseU;
		height:109/@baseU;
		bottom:0;
		right:0;
	}
	&.failed{
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%); 
		-ms-filter: grayscale(100%); 
		-o-filter: grayscale(100%); 
		filter: grayscale(100%); 
		filter: gray;
		.died{
			display:block;
		}
	}
}
.over{
	position:absolute;
	left:0;
	top:600/@baseU;
	width:200/@baseU;
	height:300/@baseU;
	overflow:hidden;
	-webkit-transition:2s all ease;
	-moz-transition:2s all ease;
	-ms-transition:2s all ease;
	-o-transition:2s all ease;
	transition:2s all ease;
	-webkit-transform:scale(1,-1);
	-moz-transform:scale(1,-1);
	-ms-transform:scale(1,-1);
	-o-transform:scale(1,-1);
	transform:scale(1,-1);
	background-size:100% 100%;
	opacity:0;
}

#face-page{
	width:100%;
	height:100%;
	overflow:hidden;
	background: url(./../img/bg.jpg) 0 0 no-repeat;
	background-size:100% 100%;
	.swiper-slide{
		width:100%;
		position:relative;
	}
	.faceBgFadeDown{
	  from{
	    opacity:0;
	    .transform_translate3d(0,-600px,0)
	  }
	  to {
	    opacity:1;
	    .transform_translate3d(0,0,0)
	  }
	}
	@keyframes faceBgFadeDown{ .faceBgFadeDown}
	@-moz-keyframes faceBgFadeDown{ .faceBgFadeDown}
	@-webkit-keyframes faceBgFadeDown { .faceBgFadeDown}
	@-o-keyframes faceBgFadeDown { .faceBgFadeDown}
	.slide-bg{
		li{
			float:left;
			.imgBox;
			margin:0 2/@baseU 3/@baseU 0;
			opacity:0;
			&.BgFedeDown{
				.animation(faceBgFadeDown,1s,ease-in,1,normal,forwards);
			}
			&.marginR0{
				margin-right:0;
			}
			&.column1{
				width:121/@baseU;
			}
			&.column2{
				width:166/@baseU;
			}
			&.column3{
				width:166/@baseU;
			}
			&.column4{
				width:166/@baseU;
			}
			&.column5{
				width:123/@baseU;
			}
		}
	}
	.slide-content{
		position:absolute;
		width:502/@baseU;
		//padding:30/@baseU 40/@baseU;
		//background-color:rgba(255, 255, 255, 0.8);
		color:#635f5a;
		text-align:center;
		position:absolute;
		top:50%;
		left:50%;
		margin-left:-251/@baseU;
		margin-top:-167/@baseU;
		.faceRoute{
		  from {
		    .transform_rotateX(0deg);
		  }
		  to {
		    .transform_rotateX(-180deg);
		  }
		}
		@keyframes faceRoute{ .faceRoute}
		@-moz-keyframes faceRoute{ .faceRoute}
		@-webkit-keyframes faceRoute { .faceRoute}
		@-o-keyframes faceRoute { .faceRoute}
		.face{
			width:502/@baseU;
			height:334/@baseU;
			line-height:0;
			font-size:0;
			//.transition(all,1s,ease,0s);
		    -webkit-transform-style: preserve-3d;
		    -moz-transform-style: preserve-3d;
		    -ms-transform-style: preserve-3d;
		    transform-style: preserve-3d;
			img{
				position:absolute;
				top:0;
				left:0;
			    // -moz-backface-visibility: hidden;
			    // backface-visibility: hidden;
			    // -webkit-backface-visibility: visible;
			    // -webkit-backface-visibility: hidden;
			}
			.img1{
				z-index:2;
			}
			.img2{
				//display:none;
				z-index:1;
				//.transform_rotateX(-180deg);
			}
			&.face-ani{
				// .img1{display:none;}
				// .img2{display:block;}
				//.transform_rotateY(-180deg);
				.animation(faceRoute,1s,ease-in-out,1,normal,forwards);
			}
		}
		&.slide-content2{
			padding-top:60/@baseU;
			padding-bottom:80/@baseU;
		}
		.font(normal,12px,1.5,'Microsoft YaHei');
		.logo{
			width:227/@baseU;
			margin:0 auto;
			margin-bottom:30/@baseU;
			&.logo2{
				margin-bottom:0.5em;
				width:337/@baseU;
			}
		}
	}
}
#animal-info{
	background:url(./../img/bg.jpg) 0 0 no-repeat;
	background-size:100% 100%;
    .swiper-container{
        width: 100%;
        height: 100%;
    }
    #animal-info-cont{
    	.swiper-slide{
			height:auto;
    	}
    }
	.over-layer-inner{
		overflow-y:scroll;
	}
	.over-layer-face{
		width:100%;
		height:100%;
		background:url(./../img/bg.jpg) 0 0 no-repeat;
		background-size:100% 100%;
		.face-top{
			width:750/@baseU;
			padding-top:200/@baseU;
		}
	}
	.over-layer-cont{
		padding-top:140/@baseU;
		background:url(./../img/bg2.jpg) 0 0 no-repeat;
		background-size:100% 100%;
	}
	.animal-title{
		padding:0 62/@baseU;
		position:relative;
		height:70/@baseU;
		display:inline-block;
		margin-bottom: 30/@baseU;
		.font(normal,24px,70/@baseU,'Microsoft YaHei');
		.icon-title{
			width:21/@baseU;
			height:43/@baseU;
			background:url(./../img/over_title_left.png) 0 0 no-repeat;
			background-size:100% 100%;
			position:absolute;
			top:50%;
			margin-top:-21/@baseU;
		}
		.icon-title-left{
			.icon-title;
			left:0;
		}
		.icon-title-right{
			.icon-title;
			background:url(./../img/over_title_right.png) 0 0 no-repeat;
			background-size:100% 100%;
			right:0;
		}
		._title{
			border-bottom:2px dashed #8a8782;
		}
	}
	.face-bottom{
		padding:0 100/@baseU;
		position:relative;
		display:inline-block;
		.font(normal,14px,1.5,'Microsoft YaHei');
		.icon-text{
			width:75/@baseU;
			height:15/@baseU;
			background:url(./../img/over_text_left.png) 0 0 no-repeat;
			background-size:100% 100%;
			position:absolute;
			top:50%;
			margin-top:-8/@baseU;
		}
		.icon-text-left{
			.icon-text;
			left:0;
		}
		.icon-text-right{
			.icon-text;
			background:url(./../img/over_text_rigth.png) 0 0 no-repeat;
			background-size:100% 100%;
			right:0;
		}
	}
	.over-layer-cont{
		.unchartTitle{
			padding:1em 0;
			font-size:14px;
			font-weight:bold;
			color:#ecb042;
		}
		.chart{
			margin:0 auto;
			margin-top:50/@baseU;
			padding-top:5/@baseU;
			width:200px;
			height:200px;
			background: url(./../img/chartbg.png) 0 0 no-repeat;
			background-size:100% 96%;
			position:relative;
			.chartTitle{
				display:block;
				position:absolute;
				top:50%;
				left:50%;
				z-index:10;
				color:#261f1c;
				font-size:14px;
			}
		}
		.describe-xinxin{
			display:none;
			width:680/@baseU;
			margin:100/@baseU 30/@baseU;
			.animal-title{font-size:18px;}
			.img{
				width:284/@baseU;
			}
			.text{
				padding:1em 0;
				width:396/@baseU;
				&::before,&::after{
					content:'';
					display:block;
					width:3em;
					margin:1em auto;
					height:2px;
					background-color:#ecb042;
				}
			}
		}
		.describe{
			width:680/@baseU;
			margin:100/@baseU 30/@baseU;
			position:relative;
			.img{
				width:468/@baseU;
			}
			.text{
				// position:absolute;
				// top:20%;
				// left:20%;
				padding-left:20%;
				margin-top:-4em;
				p{
					margin-bottom:5px;
					text-align:left;
					span{
						background-color:#ecb042;
						padding:0.2em 0.5em;
						.font(normal,12px,1,'Microsoft YaHei');
					}
				}
			}
		}
		.wechat{
			position:relative;
			.wechat-cont{
				position:relative;
				padding-bottom:30/@baseU;
				top:0;
				left:0;
				z-index:2;
			}
			.wechat-top{
				padding:34/@baseU;
				width:452/@baseU;
				margin:0 115/@baseU;
				background:url(./../img/wechat_bg_top.png) 0 0 no-repeat;
				background-size:91/@baseU 95/@baseU;
			}
			.wechat-title{
				a{
					.font(normal,14px,1.5,'Microsoft YaHei');
					color:#fff;
				}
				margin-bottom:0.5em;
			}
			.wechat-describe{
				width:520/@baseU;
				margin:0 115/@baseU;
			}
			p{
				.font(normal,12px,1.5,'Microsoft YaHei');
				text-align:left;
			}
			.link{
				text-align:center;
				margin-top:0.5em;
				a{
					color:#ecb042;
					.font(normal,14px,1.5,'Microsoft YaHei');
					text-decoration:underline;
				}
			}
			.bottom-tip{
				position:absolute;
				right:10%;
				bottom:0;
				width:100%;
				height:195/@baseU;
				// z-index:-1;
				background:url(./../img/wechat_bg_bottm.png) right bottom no-repeat;
				background-size:91/@baseU 195/@baseU;	
			}
		}
		.footer{
			padding:100/@baseU;
		}
	}
}
.over-layer{
	width:100%;
	height:100%;
	display:none;
	position:fixed;
	top:0;
	left:0;
	z-index:100;
	color:#fff;
	.over-layer-inner{
		width:100%;
		height:100%;
	}
	.over-layer-bg{
		width:100%;
		height:100%;
		background:url(./../img/bg3.jpg) 0 0 no-repeat;
		background-size:100% 100%;
		opacity:0.8;
	}
	.over-layer-content{
		width:100%;
		position:absolute;
		top:0;
		left:0;
	}
	&.over-layer-share{
		display:none;
		.over-layer-content{
			width:100%;
			position:absolute;
			top:36/@baseU;
			left:0;
			.tipimg{
				width:175/@baseU;
				height:198/@baseU;
				padding-left: 522/@baseU;
			}
			.textArea{
				.font(normal,18px,1.5,'Microsoft YaHei');
				color:#ebb145;
			}
		}
	}
	&.over-layer-qrcode{
		display:none;
		.over-layer-content{
			color:#fff;
			top:300/@baseU;
			.font(normal,14px,1.5,'Microsoft YaHei');
		}
		.qr{
			width:348/@baseU;
			margin:20/@baseU 0;
			display:inline-block;
		}
		a{
			color:#fff;
		}
		.tip-text{
			font-size:16px;
		}
	}
	&.over-layer-timeOver{
		display:none;
		.over-layer-content{
			color:#fff;
			top:160/@baseU;
			.font(normal,14px,1.5,'Microsoft YaHei');
		}
		.textArea{
			margin-bottom: 300/@baseU;
			.font(normal,16px,2,'Microsoft YaHei');
		}
		.btnbox{
			width:90%;
			padding:0 5%;
			button{
				border-color:#ebb145;
				color:#ebb145;
			}
		}
		.link{
			a{
				color:#fff;
				font-weight:normal;
			}
		}
	}
}
.dieTip{
	position:fixed;
	display:none;
	z-index:1000;
	top:0;
	left:0;
	width:100%;
	color:#fff;
	padding:0.5em;
	.font(normal,14px,1.5,'Microsoft YaHei');
	background: url(./../img/dietipbg.jpg) 0 0 no-repeat;
	background-size:100% 100%;
	text-align:center;
	.inner{
		display:inline-block;
	}
	span{
		float:left;
		margin-right:0.5em;
		&.icon{
			width:36/@baseU;
			height:31/@baseU;
			margin-top:0.3em;
			display:inline-block;
			background:url(./../img/incon.png) center center no-repeat;
			background-size:100% 100%;
		}
	}
	.savebtn{
		color:#f39801;
		text-decoration:underline;
	}
}


#mobile-wrapper{
	display:none;
	width:100%;
	height:100%;
	position:relative;
}

#pc-wraaper{
	display: block;
	width:100%;
	height:100%;
	background: url(../img/pcbg.jpg) center center no-repeat;
	background-size:cover;
	display:table;
	img{
		max-width:100%;
	}
	.pc-inner{
		display:table-cell;
		vertical-align:middle;
		.content{
			display:block;
			width:434px;
			background-color:rgba(255, 255, 255, 0.9);
			.border-box;
			padding:50px 70px;
			margin:0 auto;
			text-align:center;
			.pc_logo{
				width:50%;
				margin:0 25%;
				margin-bottom:20px;
			}
			.pc_title{
				width:100%;
				margin-bottom:10px;
			}
			.pc_text{
				width:100%;
				font-size:14px;
				line-height:1.5;
				color:#90877f;
				margin-bottom:20px;
			}
			.pc_qrcode{
				width:50%;
				margin:0 25%;
			}
		}
	}
}

/* 小屏幕（手机，小于 768px）*/
@media(max-width:768px) {
	#mobile-wrapper{
		display:block;
	}
	#pc-wraaper{
		display: none;
	}
}

